<template>
    <!-- 固有属性 -->
     <p><input type="text" :placeholder="username"/></p>
     <p><input type="password" :placeholder="password"/></p>
     <a href="url">百度首页</a>
     <div :class="{active:isActive}">绑定calss属性</div>
     <div :style="{color:textColor,fontSize:fontSize+'px'}">对象语法绑定样式</div>
     <div :style="[style1,style2]">数组绑定样式</div>
</template>
<!-- 5秒以后style样式进行改变   背景颜色 blue  padding不变 color  yellow ，border变为1px solid 颜色orange-->
<script setup>
import { ref, Text } from "vue";
let username=ref("请输入用户名");
const password="请输入密码";
const url="http://www.baidu.com";
const isActive=true;
const textColor="blue";
const fontSize=30;
const style1={backgroundColor:"yellow",padding:"30px"};
const style2={color:"blue",border:"1px solid #ddd"}
setTimeout(()=>{
   username.value = "请再次输入用户名"
  style1.backgroundColor = "blue"  
  style2.color = "yellow"          
  style2.border = "1px solid orange" 
},5000)
</script>
<style scoped>
.active{
    color: blueviolet;
}
</style>
